<template>
	<div class="image-show">
		<el-button type="text" icon="el-icon-view" @click="visible = true">查看视频</el-button>

		<el-dialog :visible.sync="visible">
			<el-carousel indicator-position="outside" height="500px" :autoplay="false">
				<el-carousel-item v-for="(item, index) in srcsArr" :key="index">
					<video :src="item" style="width: 100%; height: 500px; object-fit: cover; " controls></video>
				</el-carousel-item>
			</el-carousel>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "image-show",
	props: {
		srcs: {
			type: [Array, String],
			default: () => [],
		},
	},
	data() {
		return {
			visible: false,
		}
	},
	computed: {
		srcsArr() {
			return Array.isArray(this.srcs) ? this.srcs : this.srcs.split(",")
		},
	},
	created() {},
	methods: {},
	components: {},
}
</script>

<style lang="scss" scoped></style>
